<template>
  <div class="dashboard-container">
    <h1>欢迎， {{ nickName }}</h1>
    <!-- 显示三个框-->
    <div class="chart-row" style="margin-bottom: 20px">
      <!-- 采购订单 -->
      <div id="purchaseChart" class="chart-box purchase"
           @click="$router.push({ name: 'orderPurchase' })"
           title="点击跳转到采购订单主页">
        <div class="default-text">近7天的采购订单</div>
        <div class="echarts-container"></div>
      </div>

      <!-- 平台订单 -->
      <div id="platformChart" class="chart-box platform"
           @click="$router.push({ name: 'orderPlatform' })"
           title="点击跳转到平台订单主页">
        <div class="default-text">近7天的平台订单</div>
        <div class="echarts-container"></div>
      </div>

      <!-- 退货订单 -->
      <div id="returnChart" class="chart-box return"
           @click="$router.push({ name: 'orderReturn' })"
           title="点击跳转到退货订单主页">
        <div class="default-text">近7天的退货订单</div>
        <div class="echarts-container"></div>
      </div>
    </div>
    <!--南丁格尔图表-->
    <div style=" display: flex; justify-content: flex-start; align-items: start;">
      <!-- 图表:南丁格尔图-->
      <div id="chart1" style="width: 500px; height: 500px;"></div>
      <!-- 右侧表格：各平台退货订单详情 -->
      <el-table   :data="returnOrderList"
                  border
                  style="width: 500px; margin-left: 20px;"
                  max-height="400">
        <el-table-column prop="platformName" label="平台名称"></el-table-column>
        <el-table-column prop="num" label="退货单数"></el-table-column>
      </el-table>
    </div>
    <!-- 柱状图容器：各平台订单金额统计 -->
    <div id="chart2" style="width: 1300px; height: 400px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getPlatformlist,
  getPlatformOrderNum,
  getPurchaseOrderNum,
  getReturnOrderNum,
  getReturnOrderNumData
} from '@/api/view'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name','nickName'])
  },
  data() {
    return {
      returnOrderList: [] // 各平台退货订单列表
    };
  },
  mounted() {
    this.initPlatformAmount()
    this.initPurchaseOrderNum()
    this.initPlatformOrderNum()
    this.initReturnOrderNum()
    this.initReturnOrderNumData()
  },
  methods:{
    //各个平台的退货订单统计（南丁格尔图）
    // 各个平台的退货订单统计（南丁格尔图）
    initReturnOrderNumData() {
      const chartDom = document.getElementById('chart1');
      if (!chartDom) {
        console.error('图表容器 #chart1 未找到');
        return;
      }
      const chart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom);

      let option = {
        title: {
          text: '各平台退货订单统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 单 (占比 {d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '70%'],
            data: [],
            roseType: 'area',
            label: { show: false }
          }
        ]
      };

      getReturnOrderNumData().then(res => {
        if (res.code === 20000) {
          const processedData = res.data.map(item => ({
            value: item.num,
            name: item.platformName || '未知平台'
          }));

          // 更新图表数据
          option.series[0].data = processedData;
          chart.setOption(option);
          chartDom.classList.add('show');

          // 更新表格数据
          this.returnOrderList = res.data;
        }
      }).catch(err => {
        console.error('请求退货订单数据失败:', err);
      });
    },
    //各平台订单金额统计
    initPlatformAmount() {
      const chart = echarts.init(document.getElementById('chart2'));
      let option = {
        title: {
          text: '各平台订单金额统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: [], // 将由接口填充
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          name: '金额（元）'
        },
        series: [
          {
            name: '金额',
            type: 'bar',
            data: [],
            itemStyle: {
              color: '#5470C6'
            },
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      };
      getPlatformlist().then(res => {
        // 提取 name 和 amount 字段
        const names = res.data.map(item => item.name)
        const amounts = res.data.map(item => item.amount)

        option.xAxis.data = names
        option.series[0].data = amounts

        chart.setOption(option)
        chart.classList.add('show');
      }).catch(err => {
        console.error('请求数据失败:', err)
      })
    },
    //近7天采购订单数
    initPurchaseOrderNum() {
      const chart = echarts.init(document.querySelector('#purchaseChart .echarts-container'));
      // 模拟从接口获取的订单数量
      getPurchaseOrderNum().then(res=> {
        const option = {
          title: [
            {
              text: `${res.data}`,
              left: 'center',
              top: '30%',
              textStyle: {
                fontSize: 36,
                fontWeight: 'bold',
                color: '#333'
              }
            },
            {
              text: '',
              left: 'center',
              top: '60%',
              textStyle: {
                fontSize: 14,
                color: '#666'
              }
            }
          ],
          tooltip: {
            show: false
          },
          xAxis: { show: false },
          yAxis: { show: false },
          series: [{ type: 'bar', data: [res.data], itemStyle: { opacity: 0 } }]
        };
        chart.setOption(option);
      });
    },
    //近7天平台订单数
    initPlatformOrderNum(){
      const chart = echarts.init(document.querySelector('#platformChart .echarts-container'));
      // 模拟从接口获取的订单数量
      getPlatformOrderNum().then(res=> {
        const option = {
          title: [
            {
              text: `${res.data}`,
              left: 'center',
              top: '30%',
              textStyle: {
                fontSize: 36,
                fontWeight: 'bold'
              }
            },
            {
              text: '',
              left: 'center',
              top: '60%',
              textStyle: {
                fontSize: 14,
                color: '#666'
              }
            }
          ],
          tooltip: {
            show: false
          },
          xAxis: { show: false },
          yAxis: { show: false },
          series: [{ type: 'bar', data: [res.data], itemStyle: { opacity: 0 } }]
        };

        chart.setOption(option);

      });
    },
    //近7天退货订单数
    initReturnOrderNum(){
      const chart = echarts.init(document.querySelector('#returnChart .echarts-container'));
      // 模拟从接口获取的订单数量
      getReturnOrderNum().then(res=> {
        const option = {
          title: [
            {
              text: `${res.data}`,
              left: 'center',
              top: '30%',
              textStyle: {
                fontSize: 36,
                fontWeight: 'bold'
              }
            },
            {
              text: '',
              left: 'center',
              top: '60%',
              textStyle: {
                fontSize: 14,
                color: '#666'
              }
            }
          ],
          tooltip: {
            show: false
          },
          xAxis: { show: false },
          yAxis: { show: false },
          series: [{ type: 'bar', data: [res.data], itemStyle: { opacity: 0 } }]
        };
        chart.setOption(option);
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.chart-row {
  display: flex;
  justify-content: space-between; // 横向均匀分布
  align-items: center;
  margin-top: 40px;
}
.chart-box {
  width: 300px;
  height: 150px;
  cursor: pointer;
  position: relative;
  background-color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.4s ease-in-out;

  // 默认背景颜色区分
  &.purchase {
    background: linear-gradient(to bottom right, #e6f7e9, #d4f1db);
  }

  &.platform {
    background: linear-gradient(to bottom right, #fffbe5, #fff3cc);
  }

  &.return {
    background: linear-gradient(to bottom right, #ffe5e5, #fddddd);
  }

  .default-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #666;
    transition: all 0.4s ease-in-out;
    z-index: 2;
    white-space: nowrap;
  }

  .echarts-container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }

  &:hover {
    transform: scale(1.03) rotate(0.3deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  }

  &:hover .default-text {
    transform: translate(-50%, -40%) scale(0.9);
    opacity: 0.7;
  }

  &:hover .echarts-container {
    top: 0;
    opacity: 1;
  }
}
.purchase .default-text {
  color: #2c6b3a;
}

.platform .default-text {
  color: #a97900;
}

.return .default-text {
  color: #a92b2b;
}


.echarts-container {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.echarts-container.show {
  opacity: 1;
}


.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
